<!DOCTYPE html>
<html lang="en">
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>历史数据</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js" type="application/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/community.css">
</head>

<body style="background: url(image/bg-ssss.jpg) ">
<!--导航栏部分-->
<div th:fragment="nav">

    <nav class="navbar navbar-default" style="background-color: #ffffff">
        <div class="container-fluid" style="background-color: #ffffff" >
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a href="UI1.1.html" class="navbar-brand"
                   style="color: #074193"><b>非平稳环境下基于高斯过程机器学习的动态波束快速追踪演示系统</b></a>
            </div>

            <ul class="nav navbar-nav navbar-left">
                <li>
                    <a href="UI1.1.html" style="color: #074193">首页</a>
                </li>
                <li>
                    <a href="system.html" style="color: #074193">历史数据</a>
                </li>
                <li>
                    <a href="us.html" style="color: #074193">关于我们</a>
                </li>
            </ul>


            <ul class="nav navbar-nav navbar-right">
                <!--                        这地方显示个时间-->
                <a href="UI1.1.html" calss="image fit">
                    <img src="image/buptlogo.jpg" height="48" width="165"/>
                </a>

            </ul>
        </div><!-- /.navbar-collapse -->
        <!-- /.container-fluid -->
    </nav>
</div>


<!--<div class="container-fluid main" >-->
<!--    <div class="row" style="background: url(image/bg-ssss.jpg) ">-->

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="display:inline;"><!--这是左侧的-->
    <p style="color: #000000; font-size:22px"><b>
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        关键问题
    </b></p>
    <p style="color: mediumblue; font-size:20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.无人机毫米波网络高动态、非平稳变化，如何进行有效波束追踪？
    </p>
    <p style="color: mediumblue; font-size:20px">

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.传统全空间追踪方案，系统开销大，频谱利用率低
    </p>

    <p style="color: #000000; font-size:22px"><b>
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        解决思路
    </b></p>
    <p style="color: mediumblue; font-size:20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.建立基于高斯过程机器学习的无人机位置预测模型，追踪并预测无人机活动区域
    </p>
    <p style="color: mediumblue; font-size:20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. 波束追踪限定在预测的无人机活动区域，实现快速有效追踪
    </p>


    <p style="text-align: center;">
        <img  src="image/system01.png" height=auto width=70%/>
    </p>

    <p style="text-align: center;color: #000000; font-size:20px">
<!--        <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>-->
        <b>无人机波束追踪示意图</b>
    </p>


</div>

<!--中间部分-->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="display:inline;">
    <p style="color: #000000; font-size:22px"><b>
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        结论
    </b></p>
<!--    结论里的两段话-->
    <p style="color: mediumblue; font-size:20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.所提方案通过对无人机位置的精确预测，实现无人机波束快速追踪方案，提高了波束对准精度
    </p>
    <p style="color: mediumblue; font-size:20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. 降低由波束搜索带来的系统开销，进而提高频谱利用率，提高系统容量
    </p>
    <br>
    <br>
    <br>
    <p style="text-align: center;">
        <img  src="image/system03.png" height=auto width=70%/>
    </p>
    <div style="text-align: center;color: #000000; font-size:20px">
        <!--        <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>-->
        <b>所提方案谱效性能图</b>
    </div>
</div>


<!--右边部分-->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="display:inline;">
    <p style="color: #000000; font-size:20px"><b>
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        历史数据展示
    </b></p>
    <div id="tijiao" style="margin-left: 10px">
        <div style="display: flex; width: 100%">
            <div>
                <label id="UAV_num_str">无人机数目:2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            </div>
            <div>
                <input type="range" id="UAV_num" style="width: 200%" min="2" max="8" step="2" value="2"
                       oninput="getVal_UAV_num()">
            </div>
        </div>
        <div style="display: flex; width: 100%">
            <div>
                <label id="SNR_str">信噪比(dB):0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            </div>
            <div>
                <input type="range" id="SNR" style="width: 200%" min="0" max="15" step="5" value="0"
                       oninput="getVal_SNR()">
            </div>
        </div>
        <div style="display: flex; width: 100%">
            <div>
                <label id="slot_num_str">发送帧数目:60&nbsp;&nbsp;&nbsp;&nbsp;</label>
            </div>
            <div>
                <input type="range" id="slot_num" style="width: 200%" min="60" max="80" step="10" value="2"
                       oninput="getVal()">
            </div>
        </div>
        <input type='button' class="button1" onclick="start_fig()" value="  绘制数据图  ">
        <input type='button' class="button1" onclick="clear1()" value="  清空数据图  ">
        <br>
        <span>传统方案:</span>
        <label id="avrg">0.00</label>
        <span>    bps/Hz</span>
        <span>数据驱动方案:</span>
        <label id="avrg2">0.00</label>
        <span>    bps/Hz</span>
        <span>性能提升:</span>
        <label id="cha">0.00</label>
        <span>    %</span>
    </div>
    <div id="main" style="height:470px;width:100%;border:1px solid #ccc;padding:10px;"></div>
</div>


<!--    </div>-->
<!--</div>-->

<script src="js/echarts-all.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var flag = 0;
    var use_time = 0;
    var int;
    var UAV_num;
    var SNR;
    var slot_num;
    var slot_int = 0;

    function fileOpen2(name) {
        let xhr = new XMLHttpRequest(),
            okStatus = document.location.protocol === "file:" ? 0 : 200;
        xhr.open('GET', name, false);
        xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
        xhr.send(null);
        return xhr.status === okStatus ? xhr.responseText : null;
    }

    function start_fig() {
        clear1();
        UAV_num = document.getElementById("UAV_num").value;
        SNR = document.getElementById("SNR").value;
        slot_num = document.getElementById("slot_num").value;
        console.log(UAV_num, SNR, slot_num);
        int = setInterval("test(UAV_num,SNR,slot_num,0)", 300);
    }

    function test(UAV_num, SNR, slot_num, pose) {
        let str = fileOpen2("txtFile/" + UAV_num + "-" + SNR + "-" + slot_num + "-" + pose + ".txt");
        var strings = [];
        var nums = [];
        var labelNum = [];
        strings = str.split(";");
        strings.forEach(items => {
            nums.push(+items);
        })
        nums = nums.splice(0, nums.length - 1);
        slot_int = parseInt(slot_num);
        for (let i = 1; i < slot_int + 1; i++) {
            let str = String(i);
            labelNum.push(+str);
        }
        pose = pose + 1;
        let str2 = fileOpen2("txtFile/" + UAV_num + "-" + SNR + "-" + slot_num + "-" + pose + ".txt");
        var strings2 = [];
        var nums2 = [];
        strings2 = str2.split(";");
        strings2.forEach(items => {
            nums2.push(+items);
        })
        nums2 = nums2.splice(0, nums2.length - 1);
        setValue(labelNum.slice(0, flag), nums.slice(0, flag), nums2.slice(0, flag));
        flag = flag + 4;
        if (flag === slot_int) {
            int = clearInterval(int);
        }
    }

    function setValue(labelNumber, number, number2) {
        myChart.setOption({
            title: {
                text: "swc010",
                show: true
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: [{
                left: "right"
            }],
            xAxis: [
                {
                    type: 'category',
                    // min:0,
                    // max:90,
                    data: labelNumber
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitArea: {show: true}
                }
            ],
            series: [
                {
                    name: '传统方案',
                    type: 'line',
                    color: 'red',
                    data: number
                }, {
                    name: '数据驱动方案',
                    type: 'line',
                    color: 'green',
                    data: number2
                }
            ]
        });
        let num_array = number.map(Number);
        let num2_array = number2.map(Number);
        let sum = 0;
        let sum2 = 0;
        let len = num_array.length
        for (let i = 0; i < len; i++) {
            sum += num_array[i];
            sum2 += num2_array[i];
        }
        sum = sum / len;
        sum2 = sum2 / len;
        // 改数
        document.getElementById("avrg").innerHTML = sum;
        document.getElementById("avrg2").innerHTML = sum2;
        document.getElementById("cha").innerHTML = (sum2 - sum) / sum;
    }

    function clear1() {
        myChart.clear();
        flag = 0;
    }
</script>

</html>